<!--
 * @Description: 归档
 * @Author: zheng yiliang
 * @Date: 2021-05-11 22:19:20
 * @LastEditTime: 2021-06-12 17:23:14
 * @LastEditors: zheng yiliang
-->
<template>
  <div class="timeline">
    <div class="timeline-box shadow">
      <div class="timeline-main">
        <h1><i class="fa fa-clock-o"></i>归档</h1>
        <div class="timeline-line"></div>
        <el-collapse accordion v-model="activeNames" @change="handleChange">
          <el-collapse-item
            class="timeline-year"
            :name="key"
            v-for="(val, key) of archivesList"
            :key="key"
          >
            <h2 style="cursor: pointer; position: relative" slot="title">
              <a class="yearToggle">{{ key | dateChina('YYYY年') }}</a>
              <i
                :class="[{ 'is-active': activeNames === key }]"
                class="el-collapse-item__arrow fa fa-caret-right fa-fw"
              ></i>
              <!-- <p
                :style="{ display: activeNames === key ? 'none' : 'block' }"
                style="
                  color: #484348;
                  width: 20px;
                  text-align: center;
                  font-size: 22px;
                  z-index: 1;
                  top: 0px;
                  right: -26px;
                  position: absolute;
                  background: #fff;
                  float: left;
                "
              >
                <i data-v-5ec32caa="" class="fa fa-dot-circle-o"></i>
              </p> -->
            </h2>
            <div
              class="timeline-month"
              v-for="(activity, index) in val"
              :key="index"
            >
              <ul>
                <li>
                  <div
                    class="h4 animated"
                    :class="[index % 2 === 0 ? 'fadeInRight' : 'fadeInLeft']"
                  >
                    <p class="date">
                      {{ activity.create_time | dateChina('MM月DD日') }}
                    </p>
                  </div>
                  <p class="dot-circle animated">
                    <i class="fa fa-dot-circle-o"></i>
                  </p>
                  <div class="content animated fadeInRight">
                    <router-link
                      :to="`/detail?id=${activity._id}`"
                      style="color: #fff"
                    >
                      {{ activity.title }}
                    </router-link>
                  </div>
                  <div class="clear"></div>
                </li>
              </ul>
            </div>
          </el-collapse-item>
        </el-collapse>

        <h1 style="padding-top: 4px; padding-bottom: 2px; margin-top: 40px">
          <i class="fa fa-hourglass-end"></i>THE END
        </h1>
      </div>
    </div>
  </div>
</template>
<script>
import { archivesQry } from '@/api'

export default {
  data() {
    return {
      // height: 'auto',
      activeNames: new Date().getFullYear().toString(),
      archivesList: []
    }
  },
  async mounted() {
    const { _RejCode, data } = await archivesQry()
    if (_RejCode !== '00000000') return
    console.log(data)
    this.archivesList = data
    // this.activeNames
    // this.archivesList.forEach((item) => {
    //   item.height = true
    // })
  },
  methods: {
    handleChange(name) {
      console.log(name)
      if (this.$refs.name) {
        this.$refs.name.classList.add('is-active')
      }
    }
  }
}
</script>
<style scoped>
@import '../styles/css/timeline.css';
</style>
<style lang="scss" scoped>
::v-deep .el-collapse {
  border: 0px;
  .el-collapse-item__wrap {
    border-bottom: 0px;
  }
  .el-collapse-item__header {
    border: 0px;
    width: 31%;
    // width: 28%;
    h2 {
      width: 100%;
    }
  }
  @media (min-width: 768px) {
    .el-collapse-item__header {
      width: 16%;
      // width: 28%;
      h2 {
        width: 100%;
      }
    }
  }

  .el-collapse-item__arrow {
    margin: 0px;
  }
  .el-icon-arrow-right {
    display: none;
  }
}
</style>
